<script setup lang="ts">
import { defineProps, ref } from 'vue';
import { message } from 'ant-design-vue';
import Modal from '@/components/common/modal.vue';
import { useAntdForm, useFormRules } from '@/hooks/common/form';
import { machinewokercallMateriel } from '../../../../service/api/modules/agv/menu';
import { get, post } from '../../../../service/api/api';

interface Props {
  selectData: any[];
}

interface OpenModel {
  upPinList: any;
}

const props = defineProps<Props>();

const activeKey = ref('1');

const model = ref({
  ProducType: null,
  machineNo: null
});

const model2 = ref({
  ProducType: null,
  machineNo: null
});

const openType = ref(0);
const visible = ref(false);
const visibles = ref(false);
const openModel = ref({
  upPinList: null
});
const openModels = ref({
  podCode: null
});
// 点击叫料
function callForMaterial() {
  // this.formUnpin = this.ProducType;
  const obj = {};
  obj.materialLot = model.value.ProducType;

  machinewokercallMateriel(obj).then(({ data, error }) => {
    if (!error) {
      message.success('叫料成功', 10);
    }
  });
}
function resetList() {
  openModels.value.podCode = null;
}
// 点击叫板
function callBoard() {
  get('/mes/jlagv/machine/woker/returnNull').then(({ data, error }) => {
    if (!error) {
      message.success('操作成功', 10);
    }
  });
}
function callForMaterialtp() {
  const obj = {};

  if (model2.value.ProducType === null) {
    return message.error('请输入生产型号中间7位', 10);
  }
  if (model2.value.ProducType.length === 7) {
    obj.materialLot = model2.value.ProducType;
    post('/mes/jlagv/machine/woker/bindMaterialLot', obj).then(({ data, error }) => {
      if (!error) {
        message.success('操作成功', 10);
      }
    });
  } else {
    message.error('请输入生产型号中间7位', 10);
  }
}
function Unpin() {
  get('/mes/jlagv/machine/woker/sendMateriel?materiel=').then(({ data, error }) => {
    if (!error) {
      message.success('退PIN成功', 10);
    }
  });
}
function feedingBoard() {
  get('/mes/jlagv/machine/woker/callNull').then(({ data, error }) => {
    if (!error) {
      message.success('退PIN返空托成功', 10);
    }
  });
}
const { createRequiredRule } = useFormRules();
const { formRef, validate, resetFields } = useAntdForm();
type RuleKey = Extract<keyof OpenModel, 'upPinList'>;

const rules: Record<RuleKey, App.Global.FormRule> = {
  upPinList: createRequiredRule('不能为空'),
  podCode: createRequiredRule('不能为空')
};
function openModal(type: 0 | 1) {
  openType.value = type;
  visible.value = true;
}
function bindPod() {
  visibles.value = true;
}
async function handleOk() {
  // await validate();

  if (openType.value == 0) {
    const obj = {};
    obj.machineNo = openModel.value.upPinList;
    post('/mes/jlagv/machine/woker/pointToPoint', obj).then(({ data, error }) => {
      if (!error) {
        message.success('调料成功', 10);
        openModel.value.upPinList = null;
      }
    });
  } else {
    get(`/mes/jlagv/machine/woker/returnFull?materiel=${openModel.value.upPinList}`).then(({ data, error }) => {
      if (!error) {
        message.success('操作成功', 10);
        openModel.value.upPinList = null;
      }
    });
  }
}
async function handleOks() {
  get(`/mes/jlagv/machine/woker/bindPod?podCode=${openModels.value.podCode}`).then(({ data, error }) => {
    if (!error) {
      message.success('操作成功', 10);
      openModels.value.podCode = null;
    }
  });
}
function handleClose() {
  openModel.value.upPinList = null;
  openModels.value.podCode = null;
}
function getMachineNo() {
  post('/mes/jlagv/machine/woker/machineNo', '').then(({ data, error }) => {
    if (!error) {
      model2.value.machineNo = data;
      model.value.machineNo = data;
    }
  });
}
getMachineNo();
</script>

<template>
  <div class="right-content w-90% pb50px">
    <div class="title m-t50px h-100px text-align-center font-size-14 font-bold">AGV自动呼叫平台</div>
    <div class="content w-full">
      <ATabs v-model:activeKey="activeKey" class="h-full w-full">
        <ATabPane key="1" tab="AGV机台待钻位呼叫">
          <div class="form p40px">
            <AForm
              :model="model"
              :label-col="{
                span: 5,
                md: 7
              }"
              class="search-form"
            >
              <div class="w-full flex">
                <ARow :gutter="[15, 8]" wrap class="w-full">
                  <ACol :span="24" :md="12" :lg="12" :xl="12" :xxl="12">
                    <AFormItem label="叫料型号" name="ProducType" class="m-0" :label-col="{}">
                      <ASelect v-model:value="model.ProducType" placeholder="请选择叫料型号" allow-clear show-search>
                        <ASelectOption v-for="item in props.selectData" :key="item.index" :value="item.materialLot">
                          {{ item.materialLot }}
                        </ASelectOption>
                      </ASelect>
                    </AFormItem>
                  </ACol>
                  <ACol :span="24" :md="12" :lg="12" :xl="12" :xxl="12">
                    <AFormItem label="机台号" name="machineNo" class="m-0" :label-col="{}">
                      <AInput
                        v-model:value="model.machineNo"
                        disabled
                        placeholder="请输入机台号"
                        allow-clear
                        autocomplete="off"
                      />
                    </AFormItem>
                  </ACol>
                </ARow>
              </div>
            </AForm>
            <div class="btn w-full p50px">
              <ARow :gutter="[0, 25]">
                <ACol :span="12" class="flex flex-justify-center">
                  <AButton type="primary" size="large" @click="callForMaterial">叫 料</AButton>
                </ACol>
                <ACol :span="12" class="flex flex-justify-center">
                  <AButton type="primary" size="large" @click="openModal(0)">调 料</AButton>
                </ACol>
                <ACol :span="12" class="flex flex-justify-center">
                  <AButton type="primary" size="large" @click="callBoard">
                    <span>空托返至上PIN区</span>
                  </AButton>
                </ACol>
                <ACol :span="12" class="flex flex-justify-center">
                  <AButton type="primary" size="large" @click="openModal(1)">
                    <span>满托反至上PIN区</span>
                  </AButton>
                </ACol>
              </ARow>
            </div>
          </div>
        </ATabPane>
        <ATabPane key="2" tab="AGV机台已钻位呼叫" force-render>
          <div class="form p50px">
            <AForm
              :model="model"
              :label-col="{
                span: 5,
                md: 7
              }"
              class="search-form"
            >
              <div class="w-full flex">
                <ARow :gutter="[15, 8]" wrap class="w-full">
                  <ACol :span="24" :md="12" :lg="12" :xl="12" :xxl="12">
                    <AFormItem label="料号" name="ProducType" class="m-0" :label-col="{}">
                      <AInput
                        v-model:value="model2.ProducType"
                        placeholder="请输入料号"
                        allow-clear
                        autocomplete="off"
                      />
                    </AFormItem>
                  </ACol>
                  <ACol :span="24" :md="12" :lg="12" :xl="12" :xxl="12">
                    <AFormItem label="机台号" name="machineNo" class="m-0" :label-col="{}">
                      <AInput
                        v-model:value="model2.machineNo"
                        placeholder="请输入机台号"
                        disabled
                        allow-clear
                        autocomplete="off"
                      />
                    </AFormItem>
                  </ACol>
                </ARow>
              </div>
            </AForm>
            <div class="btn w-full p50px">
              <ARow :gutter="[0, 25]">
                <ACol :span="12" class="flex flex-justify-center">
                  <AButton type="primary" size="large" @click="callForMaterialtp">物料绑定</AButton>
                </ACol>
                <ACol :span="12" class="flex flex-justify-center">
                  <AButton type="primary" size="large" @click="Unpin">换料退PIN</AButton>
                </ACol>
                <ACol :span="12" class="flex flex-justify-center">
                  <AButton type="primary" size="large" @click="bindPod">托盘绑定</AButton>
                </ACol>
                <ACol :span="12" class="flex flex-justify-center">
                  <AButton type="primary" size="large" @click="feedingBoard">退PIN返空托</AButton>
                </ACol>
              </ARow>
            </div>
          </div>
        </ATabPane>
      </ATabs>
    </div>
    <Modal
      v-model:visible="visible"
      :title="openType == 0 ? '调料' : '满托反至上PIN区'"
      width="500px"
      height="193px"
      destroy-on-close
      @ok="handleOk"
      @close="handleClose"
    >
      <AForm ref="formRef" :model="openModel" :rules="rules" class="search-form">
        <AFormItem :label="openType == 0 ? '机台号' : '生产型号'" name="upPinList" class="m-0" :label-col="{}">
          <AInput
            v-model:value="openModel.upPinList"
            :placeholder="`请输入${openType == 0 ? '机台号' : '生产型号'}`"
            allow-clear
            autocomplete="off"
          />
        </AFormItem>
      </AForm>
    </Modal>
    <Modal
      v-model:visible="visibles"
      title="绑定托盘"
      width="500px"
      height="193px"
      destroy-on-close
      @reset="resetList"
      @ok="handleOks"
      @close="handleClose"
    >
      <AForm ref="formRef" :model="openModels" :rules="rules" class="search-form">
        <AFormItem label="托盘编号" name="podCode" class="m-0" :label-col="{}">
          <AInput v-model:value="openModels.podCode" placeholder="请输入托盘编号" allow-clear autocomplete="off" />
        </AFormItem>
      </AForm>
    </Modal>
  </div>
</template>

<style lang="scss" scoped>
.right-content {
  border: 2px solid hsla(0, 0%, 50%, 0.3);
  background-color: hsla(0, 0%, 50%, 0.1);
  .title {
    color: #646cff;
  }
  .content {
    // height: calc(100% - 150px);
    padding-top: 30px;
    :deep(.ant-tabs) {
      .ant-tabs-nav {
        &::before {
          display: none;
        }
        .ant-tabs-nav-wrap {
          justify-content: center;
        }
        .ant-tabs-content-holder {
          height: calc(100% - 46px);
        }
      }
    }
    .btn {
      .ant-btn-primary {
        width: 150px;
        height: 40px;
      }
    }
  }
}
</style>
